<template>
	<view :lz-theme="APPTheme">
		<view class="document" >
			<uni-nav-bar fixed status-bar title="">
				<view slot="left">文档</view>
				<view slot="right">
					<view class="r-warp">
						<uni-icons type="search" size="20"  @click="searchFn"></uni-icons>
						<view class="r-left" @click="navigetToUpload">
							<uni-icons type="cloud-upload-filled" size="20"></uni-icons>
							<u-badge :offset="[10,-25]" type="error" :count="lzuploadFile.length"></u-badge>
						</view>
						<uni-icons type="more-filled" size="20" @click="moreFeatures"></uni-icons>
					</view>
				</view>
			</uni-nav-bar>
			<view class="center">
				<view class="c-bottom">
					<uni-segmented-control :current="segmented.current" :values="segmented.items" @clickItem="onClickItem" style-type="text"
					 active-color="#0088fe"></uni-segmented-control>
					<view class="control-content u-skeleton">
						<view v-if="segmented.current === 0">
							<ms-dropdown-menu class="u-skeleton-fillet" style="padding:0 10px;">
								<ms-dropdown-item v-model="shared.dropdown" :list="shared.list" :APPTheme="APPTheme" @input="inputDropdown"></ms-dropdown-item>
							</ms-dropdown-menu>
						</view>
						<view id="mescrollCenter">
							<!-- 共享showCheckbox开启多选 -->
							<mescroll-item ref="mescrollItem0" :i="0" :index="segmented.current" :otherData="otherData" :scrollHeight="selectInfoHeight" :showCheckbox="false" :footerBotttom="footerBotttom"></mescroll-item>
							<!-- 私人盘 -->
							<mescroll-item ref="mescrollItem1" :i="1" :index="segmented.current" :otherData="otherData" :scrollHeight="selectInfoHeight" :showCheckbox="true" :footerBotttom="footerBotttom"></mescroll-item>
							<!-- 加密盘 -->
							<mescroll-item ref="mescrollItem2" :i="2" :index="segmented.current" :otherData="otherData" :scrollHeight="selectInfoHeight" :showCheckbox="true" :footerBotttom="footerBotttom"></mescroll-item>
						</view>
						
					</view>
					<!-- 悬浮球 -->
					<view class="float-btn" style="z-index: 1000;" @click="addenclosure">
						<hover-ball type="plusempty" color="#fff" size="26"></hover-ball>
					</view>
				</view>
		
			</view>
			<!-- #ifndef APP-PLUS -->
				<!-- 新建 -->
				<uni-popup ref="popupShare" type="bottom" style="z-index: 1000;">
					<uni-popup-share title="新 建" @select="selectPopup" :APPTheme="APPTheme" :filingType="otherData.filingType"></uni-popup-share>
				</uni-popup>
			<!-- #endif -->
			<!-- 对话框 -->
			<uni-popup ref="dialogInput" type="dialog">
				<uni-popup-dialog mode="input" title="新建文件夹" placeholder="请输入新建文件夹命名" type="error" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
			<!--骨架屏 u-skeleton-circle绘制圆形  u-skeleton-fillet绘制圆角矩形  u-skeleton-rect绘制矩形-->
			<u-skeleton :loading="skeleton.loading" :animation="true" :bgColor="APPTheme=='theme-light'?'#ffffff':'#000000'"></u-skeleton>
			<!-- 量子上传 -->
			<lz-file ref="lzFile" @up-success="QSSupSuccess" top="75px"></lz-file>
			<u-no-network></u-no-network>
		</view>
	</view>
</template>

<script>
	let that,mescroll
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import MescrollItem from "../document/components/mescroll-more-item/mescroll-more-item.vue";
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
	import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components:{
			msDropdownMenu,
			msDropdownItem,
			uniPopupShare,
			MescrollItem,
			uniPopupDialog
		},
		data() {
			return {
				skeleton: { //骨架屏
					loading: false,
				},
				segmented: { //分段器
					current: 0,
					items: ['共享盘', '私人盘', '加密盘'],
				},
				//共享盘
				shared: {
					list: [{
							text: '空间定位',
							value: 0
						},
						{
							text: '根节点',
							value: 1
						},
						{
							text: '根节点2',
							value: 2
						},
					],
					dropdown:0
				},
				otherData:{
					parentId:'',//当前文件夹id
					filingType:0,//0共享盘1私人盘2加密盘
				},
				//#ifdef H5
				footerBotttom:'50px',
				//#endif
				//#ifndef H5
				footerBotttom:'0px',
				//#endif
				selectInfoHeight:'60%',//节点信息高度
			}
		},
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api','lzuploadFile']),
		},
		onLoad() {
			that = this
			//监听底部弹出点击事件
			uni.$off('docDrawer')
			uni.$on('docDrawer',(res)=>{
				that.selectPopup(res)
			})
			//监听新建文档成功
			uni.$off('selecTemplateOfficeBack')
			uni.$on('selecTemplateOfficeBack',(res)=>{
				//主动刷新
				that.triggerDownScroll()
			})
			that.$nextTick(function(){
				//获取节点信息
				that.createSelectorQuery()
			})
		},
		methods: {
			...mapActions(['set_lzfileList','remove_lzfileList']),
			//点击加号
			addenclosure(){
				//#ifndef APP-PLUS
				this.$refs.popupShare.open()
				//#endif
				//#ifdef APP-PLUS
				uni.$emit('document_drawer_filingType',that.otherData.filingType)
				uni.getSubNVueById('docDrawer').show('slide-in-bottom', 200);
				//#endif
			},
			//选择底部弹出item
			selectPopup(e){
				console.log(e);
				let data=null
				//#ifndef APP-PLUS
					data=e.item
				//#endif
				//#ifdef APP-PLUS
					data=e
					uni.getSubNVueById('docDrawer').hide('slide-in-bottom', 200);
				//#endif
				if(data.text=='文档'||data.text=="表格"){//新建word和excl
					//filingType文件柜类型
					uni.navigateTo({
						url: '../document/selecTemplateOffice/selecTemplateOffice?type='+e.index+'&filingType='+that.otherData.filingType+'&parentId=',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else if(data.text=='文件夹'){//新建文件夹
					that.$refs.dialogInput.open()
				}else if(data.text=='上传'){
					if(that.segmented.current==2){//加密盘
						//调用文件管理系统选取文件
						that.documentManagementSystem()
					}else{
						//只选择上传图片
						that.chooseImage()
					}
					
				}
			},
			//调用文件管理系统选取文件
			documentManagementSystem(){
				/*
				选择文件并上传传入额外参数
				*/
				that.$refs.lzFile.upload({
					filingType:2,//加密盘
					parentId:'-1',//所属文件夹id【根节点】
					uploadType:0,//0为文件柜，量子文件上传，1为邮箱，量子文件上传
				});
			},
			//选取图片
			chooseImage(){
				let that=this
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						res.tempFiles.forEach(item=>{
							// 普通图片上传
							that.uploadFile(item)
						})
				    }
				});
			},
			//附件上传成功回调
			QSSupSuccess(e){
				//主动刷新
				this.triggerDownScroll()
			},
			//图片上传
			uploadFile(item){
				let uuid=that.$lizhao.guid(32)
				let formMate={
					inputType:'wps',
					parentId:'',
					filingType:that.otherData.filingType,//0共享盘1私人盘2加密盘
					fileType:3//0文件夹,1word,2excl,3图片
				}
				that.GLOBAL.uploadFile(that.api.GLOBAL_admin_rest_sys_upload_fileUpload,item.path,formMate,function(uploadTask){
					//监听上传进度
					let file={
						file:item,
						uuid:uuid,
						uploadTask:uploadTask
					}
					//存储上传列表
					that.set_lzfileList(file)
				}).then(res=>{
					//上传成功，移除vuex当前文件
					that.remove_lzfileList(uuid)
					//主动刷新
					that.triggerDownScroll()
					
				})
			},
			//确认新建文件夹
			dialogInputConfirm(fn,item){
				console.log(item);
				let req={
					fileType:0,//文件类型文件夹
					filingName:item,//文件柜名称
					filingType:that.otherData.filingType,//文件柜类型
					parentId:'',//文件夹id
				}
				that.GLOBAL.doPost(that.api.GLOBAL_admin_rest_biz_filingCabinets_save,req).then(res=>{
					that.$refs.dialogInput.close()
					if(res.code=='0'&&res.data.flag){
						uni.showToast({
							title: res.data.msg,
							icon:"success"
						});
						//主动刷新
						that.triggerDownScroll()
						
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:"none"
						});
					}
				})
			},
			//主动刷新
			triggerDownScroll(){
				let that =this
				that.$refs['mescrollItem'+that.otherData.filingType].triggerDownScroll()
			},
			onClickItem(e) {
				if (that.segmented.current !== e.currentIndex) {
					that.segmented.current = e.currentIndex
					that.otherData.filingType=e.currentIndex
				}
			},
			inputDropdown(e){
				console.log(e);
			},
			//更多功能
			moreFeatures(){
				uni.navigateTo({
					url: '/pages/document/moreFeatures/moreFeatures',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//上传列表
			navigetToUpload(){
				uni.navigateTo({
					url: '/pages/document/fileUpload/fileUpload',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//获取节点信息
			createSelectorQuery(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#mescrollCenter').boundingClientRect(data => {
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  that.selectInfoHeight=data.height+'px'
				}).exec();
			},
			//搜索
			searchFn(){
				uni.navigateTo({
					url: '/pages/document/docSearch/docSearch',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
@import './document.scss';
</style>
